<template>
	<view class="category-detail-box">
		<view class="category-header">
			<u-image width="550" height="100%" v-if="data.topImgUrl" :src="data.topImgUrl" mode="aspectFill">
				<u-loading slot="loading"></u-loading>
			</u-image>
		</view>
		<view class="category-title">
			<text>{{data.title}}</text>
		</view>
		<view class="category-main">
			<block v-for="item in data.products" :key="item.id">
				<view class="category-goods-items" @click="onProductsItemTap(item.id)">
					<u-image class="fixImage" width="120" height="120" :src="item.url"
						mode="aspectFill">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<view>{{item.name}}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name: "category-card",
		props: {
			data: {
				type: Object,
				default: function() {
					return {}
				}
			},
		},
		data() {
			return {

			};
		},
		methods: {
			onProductsItemTap(id) {
				this.$emit("onProductsItemTap", id)
			}
		},
	}
</script>

<style lang="scss">
	.category-detail-box {
		overflow: hidden;
		padding: 10px;

		.category-header {
			height: 200rpx;
			text-align: center;

			image {
				border-radius: 5rpx;
				width: 550rpx;
				max-height: 100%;
			}
		}

		.category-title {
			margin: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-size: 24rpx;
				color: #AB956D;

				&:after,
				&:before {
					content: '';
					display: inline-block;
					position: relative;
					top: -6rpx;
					width: 70rpx;
					height: 3rpx;
					margin: 0 20rpx;
					background-color: #979797;
				}
			}
		}

		.category-main {
			display: flex;
			flex-wrap: wrap;

			.category-goods-items {
				width: 33.333333%;
				margin-bottom: 20rpx;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					height: 120rpx;
					width: 120rpx;
					border-radius: 120rpx;
				}

				view {
					height: 60rpx;
					font-weight: normal;
					color: #444452;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
